<template>
	<view class="pay-content">
		<view class="top" @click='goAddress'>
			<image class='img' src="@/static/pay/address.png"></image>
			<view class="right" v-if='userInfo.length==0? false:true'>
				<p><span>{{ userInfo.name }}</span><span>{{ userInfo.phone }}</span></p>
				<p>{{ userInfo.address }}</p>
				<p>收货不便时,可选择暂存服务</p>
			</view>
			<view v-else style='color: rgba(216,30,6,1);margin-left: 20rpx;font-size: 28rpx'>
				<p>您还没填写收货地址，点击去填写</p>
			</view>
		</view>
		<view class="order">
			<view class='head'>
				<image class='logo' src="@/static/icon/shop.png"></image>
				<span>大地智慧专营店</span>
			</view>
			<view class="order-detail" v-for='(item,index) in payData' :key='index'>
				<order-card :item='item'></order-card>
			</view>
			<view class="info">
				<p><span>配送方式</span><span>普通配送</span><span>快递免邮></span></p>
				<p><span>运险费</span><span>卖家赠送，退换货可赔</span><span>></span></p>
				<p><span>开具发票</span><span>本次不开具发票</span><span>></span></p>
				<p><span>订单备注</span><span><input type="text" v-model='from_info' value='' placeholder-class="phcolor" placeholder="选填,请先和商家协商一致"/></span><span>></span></p>
			</view>
		</view>
		<ul class="card">
			<li>
				<image class='img1' src="@/static/pay/money.png"></image>
				可用108大地金币抵用1.08元
				<image class='img2' src="@/static/pay/select.png"></image>
			</li>
			<li>
				<image class='img3' src="@/static/pay/red.png"></image>
				红包(含168消费券)
				<span>-￥0.60</span>
			</li>
		</ul>
		<view class="bottom">
			<span>共{{ payNum }}件</span>
			<span>合计:<span>￥{{ payMoney | totalPrice }}<span>(已优惠￥1.68)</span></span></span>
			<span @click='goSuccess'>确认订单</span>
		</view>
	</view>
</template>

<script>
	import orderCard from '../../tab4/view/order/card.vue'
	export default{
		components:{
			orderCard
		},
		data(){
			return{
				userInfo: [],
				payData: [],
				payNum: 0,
				payMoney: 0,
				from_info: '',
				detailData: null
			}
		},
		filters:{
			totalPrice(payMoney){
				let payTotalMoney = payMoney - 1.68
				return payTotalMoney.toFixed(2)
			}
		},
		onShow() {
			this.userInfo = this.$store.state.a.userInfo[0]
		},
		onLoad(option) {
			this.userInfo = this.$store.state.a.userInfo[0]
			if(option.keyword == 'detail'){
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.on('sendDetail', res=> {
					this.detailData = res.data
				  this.payData.push(res.data)
				})
				this.payNum = this.payData[0].buyNum
				this.payMoney = this.payData[0].price
			}else{
				this.payData = this.$store.state.b.cartPay
				this.payNum = this.$store.getters.getCartStatus
				this.payMoney = this.$store.getters.getTotalPrice.toFixed(2)
			}
		},
		methods:{
		  // 跳转至收货地址
			goAddress(){
				uni.navigateTo({
					url:'/pages/tab4/view/often/address'
				})
			},
			// 点击确定支付
			goSuccess(){
				if(this.userInfo == undefined){
					uni.showToast({
						title:'收货地址为空！',
						icon: 'none'
					})
				}else if(this.userInfo.name == '' | this.userInfo.phone == '' | this.userInfo.address == '请选择您的收货地址'){
					uni.showToast({
						title:'收货信息不符合规范！',
						icon: 'none'
					})
				}else{
					let that = this
					uni.showModal({
					  title: '是否确认付款?',
					  success(res){
					    if(res.confirm){
					      uni.navigateTo({
					      	url:'/pages/tab3/view/success',
									success(res){
										uni.showToast({
											title:'支付成功'
										})
									  that.detailData == null ? '':that.$store.commit('payDetail', that.detailData)
										that.payData.map(item=>{
											item.payStatus = true
										})
									}
					      })
					    }else if(res.cancel){
								uni.navigateTo({
									url:'/pages/tab3/view/error',
									success(res){
										uni.showToast({
											title:'支付失败！',
											icon: 'none'
										})
										that.detailData == null ? '':that.$store.commit('payDetail', that.detailData)
										that.payData.map(item=>{
											item.payStatus = false
										})
									}
								})
					    }
					  }
					})
				}
			}
		}
	}
</script>

<style lang='scss'>
.pay-content{
	width: 100%;
	height: 100vh;
	overflow: auto;
	background-color: rgba(176,196,222,.1);
	box-sizing: border-box;
	padding-bottom: 140rpx;
	.top,.order,.card{
		width: 95%;
		margin-left: 2.5%;
		margin-top: 30rpx;
		background-color: white;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
	}
	.top{
		display: flex;
		align-items: center;
		.img{
			width: 80rpx;
			height: 80rpx;
		}
		.right{
			width: calc(100% - 100rpx);
			height: 165rpx;
			line-height: 53rpx;
			margin-left: 20rpx;
			font-size: 30rpx;
			p:first-child{
				span:last-child{
					color: #999999;
					margin-left: 20rpx;
				}
			}
			p:nth-child(2){
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: rgba(0,0,0,.7);
			}
			p:last-child{
				color: rgba(216,30,6,1)
			}
		}
	}
	.order{
		.head{
			width: 100%;
			height: 60rpx;
			display: flex;
			align-items: center;
			.logo{
				width: 60rpx;
				height: 60rpx;
			}
			span{
				font-size: 28rpx;
				letter-spacing: 8rpx;
			}
		}
		.order-detail{
			width: 100%;
		}
		.info{
			width: 85%;
			margin-left: 15%;
			p{
				width: 100%;
				height: 80rpx;
				line-height: 100rpx;
				font-size: 28rpx;
				position: relative;
				span:first-child{
					width: 120rpx;
					display:inline-block;
					text-align-last:justify;
					text-align:justify;
				}
				span:nth-child(2){
					color: rgba(175,196,222,.7);
					margin-left: 20rpx;
				}
				span:last-child{
					color: #2C405A;
					position: absolute;
					right: 0;
					letter-spacing: 8rpx;
				}
			}
			p:last-child{
				display: flex;
				align-items: center;
				input{
					color: rgba(175,196,222,.7);
				}
				.phcolor{ 
				  color: rgba(175,196,222,.7); 
				} 
			}
		}
	}
	.card{
		font-size: 28rpx;
		letter-spacing: 5rpx;
		li{
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			position: relative;
			.img1{
				width: 50rpx;
				height: 50rpx;
			}
			.img2,.img3{
				width: 40rpx;
				height: 40rpx;
			}
			.img3{
				margin-left: 5rpx;
				margin-right: 8rpx;
			}
			.img2,span{
				position: absolute;
				right: 0;
				color: rgba(216,30,6,1)
			}
		}
	}
	.bottom{
		width: 100%;
		height: 120rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		background-color: white;
		border-top: 1rpx solid rgba(176,196,222,.1);
		display: flex;
		justify-content: space-around;
		align-items: center;
		span:first-child{
			color: #999999;
			font-size: 30rpx;
		}
		span:nth-child(2){
			>span{
				color: #DD2222;
				font-size: 40rpx;
				span{
					color: #999999;
					font-size: 28rpx;
				}
			}
		}
		>span:last-child{
			background-color: #DD2222;
			color: white;
			width: 230rpx;
			height: 80rpx;
			border-radius: 40rpx;
			letter-spacing: 5rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
